<template>
    <div class="userListBox">
        <span class="pageName">用户管理 > 用户列表</span>
        <div class="searchBox">
            <userListSearch @clickSearch="searchData" @delSelection="delFromTable" @addUser="addUser"></userListSearch>
        </div>
        <div class="tableBox">
            <!-- 表格 -->
            <el-table ref="multipleTable" :data="userList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                tooltip-effect="dark" @selection-change="handleSelectionChange" border
                style="width: 98%;font-size: 14px;margin: auto;margin-left: 30px;" :header-cell-style="{
                    background: '#015478', color: '#fff'
                }">
                <el-table-column type="selection" width="50px" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" align="center" width="61px">
                </el-table-column>
                <el-table-column prop="img" label="头像" align="center" width="51px">
                    <template slot-scope="scope">
                        <img slot="reference" :src="scope.row.img" style="width: 30px;height: 30px">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="昵称" align="center" width="74px">
                </el-table-column>
                <el-table-column prop="tel" label="手机号" align="center" width="107px">
                </el-table-column>
                <el-table-column prop="chatNum" label="来聊号" align="center" width="82px">
                </el-table-column>
                <el-table-column prop="sex" label="性别" align="center" width="50px">
                </el-table-column>
                <el-table-column prop="palNum" label="好友数量" align="center" width="80px">
                </el-table-column>
                <el-table-column prop="groupNum" label="群组数量" align="center" width="80px">
                </el-table-column>
                <el-table-column prop="vip" label="会员" align="center" width="52px">
                </el-table-column>
                <el-table-column prop="loginDate" label="最近登录" align="center" width="132px">
                </el-table-column>
                <el-table-column prop="registerDate" label="注册时间" align="center" width="132px">
                </el-table-column>
                <el-table-column prop="mode" label="状态" align="center" width="65px">
                </el-table-column>
                <el-table-column prop="online" label="在线" align="center" width="80px">
                </el-table-column>
                <el-table-column label="操作" align="center" width="175px">
                    <template slot-scope="scope">
                        <el-button @click="view(scope.row)" type="text"
                            style="color: #015478;font-size: 14px">详情</el-button>
                        <el-button @click="freeze(scope.row)" type="text" style="color: #015478;font-size: 14px">{{
                            scope.row.operate
                        }}</el-button>
                        <el-button @click="update(scope.row)" type="text"
                            style="color: #015478;font-size: 14px">修改</el-button>
                        <el-button @click="del(scope.row)" type="text"
                            style="color: #015478;font-size: 14px">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <pagination :tableData="userList" @sizeChange="sizeChange" @currentChange="currentChange"></pagination>

            <!-- 查看信息弹出框 -->
            <el-dialog title="查看信息" :visible.sync="viewUserForm" width="50%">
                <el-form :model="viewData" class="addForm" disabled id="view">
                    <el-form-item label="头像" :label-width="formLabelWidth" style="width:180px;height: 105px;">
                        <img :src="viewData.img" style="width:80px;height: 80px;" />
                    </el-form-item>
                    <el-form-item label="ID" :label-width="formLabelWidth">
                        <el-input v-model="viewData.id" autocomplete="off" class="addInp"
                            placeholder="请输入ID"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" :label-width="formLabelWidth">
                        <el-input v-model="viewData.name" autocomplete="off" class="addInp"
                            placeholder="请输入昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth">
                        <el-input v-model="viewData.sex" autocomplete="off" class="addInp"
                            placeholder="请输入好友数量"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" :label-width="formLabelWidth">
                        <el-input v-model="viewData.tel" autocomplete="off" class="addInp"
                            placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="来聊号" :label-width="formLabelWidth">
                        <el-input v-model="viewData.chatNum" autocomplete="off" class="addInp"
                            placeholder="请输入来聊号"></el-input>
                    </el-form-item>
                    <el-form-item label="VIP" :label-width="formLabelWidth">
                        <el-input v-model="viewData.vip" autocomplete="off" class="addInp"
                            placeholder="请输入vip"></el-input>
                    </el-form-item>
                    <el-form-item label="在线" :label-width="formLabelWidth">
                        <el-input v-model="viewData.online" autocomplete="off" class="addInp"
                            placeholder="请输入在线"></el-input>
                    </el-form-item>
                    <el-form-item label="好友数量" :label-width="formLabelWidth">
                        <el-input v-model="viewData.palNum" autocomplete="off" class="addInp"
                            placeholder="请输入好友数量"></el-input>
                    </el-form-item>
                    <el-form-item label="群组数量" :label-width="formLabelWidth">
                        <el-input v-model="viewData.groupNum" autocomplete="off" class="addInp"
                            placeholder="请输入群组数量"></el-input>
                    </el-form-item>
                    <el-form-item label="最近登录" :label-width="formLabelWidth">
                        <el-input v-model="viewData.loginDate" autocomplete="off" class="addInp"
                            placeholder="请输入最近登录"></el-input>
                    </el-form-item>
                    <el-form-item label="注册时间" :label-width="formLabelWidth">
                        <el-input v-model="viewData.registerDate" autocomplete="off" class="addInp"
                            placeholder="请输入注册时间"></el-input>
                    </el-form-item>
                    <el-form-item label="个性签名" :label-width="formLabelWidth">
                        <el-input v-model="viewData.personalSign" autocomplete="off" class="addInp"
                            placeholder="请输入个性签名"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-input v-model="viewData.mode" autocomplete="off" class="addInp"
                            placeholder="请输入状态"></el-input>
                    </el-form-item>
                    <el-form-item label="钱包" :label-width="formLabelWidth">
                        <el-input v-model="viewData.wallet" autocomplete="off" class="addInp"
                            placeholder="请输入钱包"></el-input>
                    </el-form-item>
                    <el-form-item label="IP" :label-width="formLabelWidth">
                        <el-input v-model="viewData.IP" autocomplete="off" class="addInp"
                            placeholder="请输入IP"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelView">返回</el-button>
                </div>
            </el-dialog>
            <!-- 修改信息弹出框 -->
            <el-dialog title="修改信息" :visible.sync="alterUserForm" width="35%">
                <el-form :model="formData" class="addForm" :rules="rules" ref="formData">
                    <el-form-item label="头像" :label-width="formLabelWidth" prop="img">
                        <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
                            :multiple="false" :on-change="uploadFile" accept="image/jpg,image/jpeg,image/png">
                            <img v-if="formData.img" :src="formData.img" class="el-upload-picture-car"
                                style="width:80px;height: 80px;" />
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="昵称" :label-width="formLabelWidth" prop="name">
                        <el-input v-model="formData.name" autocomplete="off" class="addInp"
                            placeholder="请输入昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" :label-width="formLabelWidth" prop="tel">
                        <el-input v-model="formData.tel" autocomplete="off" class="addInp"
                            placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="来聊号" :label-width="formLabelWidth" prop="chatNum">
                        <el-input v-model="formData.chatNum" autocomplete="off" class="addInp"
                            placeholder="请输入来聊号"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                        <el-radio v-model="formData.sex" :label="0">男</el-radio>
                        <el-radio v-model="formData.sex" :label="1">女</el-radio>
                    </el-form-item>
                    <el-form-item label="好友数量" :label-width="formLabelWidth" prop="palNum">
                        <el-input v-model.number="formData.palNum" autocomplete="off" class="addInp"
                            placeholder="请输入好友数量"></el-input>
                    </el-form-item>
                    <el-form-item label="群组数量" :label-width="formLabelWidth" prop="groupNum">
                        <el-input v-model.number="formData.groupNum" autocomplete="off" class="addInp"
                            placeholder="请输入群组数量"></el-input>
                    </el-form-item>
                    <el-form-item label="注册时间" :label-width="formLabelWidth" prop="registerDate">
                        <el-date-picker v-model="formData.registerDate" type="datetime" placeholder="选择日期时间"
                            align="right" :picker-options="formDatePickerOptions" value-format="yyyy-MM-dd HH:mm">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth" prop="mode">
                        <el-radio v-model="formData.mode" :label="2">正常</el-radio>
                        <el-radio v-model="formData.mode" :label="3">已冻结</el-radio>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="alterUser('formData')" :plain="true">确 定</el-button>
                    <el-button @click="cancelAlter('formData')">取 消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>

import userListSearch from '@/components/search/userList/userListSearch.vue';
import pagination from '@/components/pagination/pagination.vue';

export default {
    name: 'UserList',
    components: {
        userListSearch,
        pagination
    },
    data() {
        return {
            userList: [],
            currentPage: 1, // 当前页码
            total: '', // 总条数
            pageSize: 8, // 每页的数据条数

            // 选中
            multipleSelection: [],

            // 查看
            viewData: {
                img: '',
                id: '',
                name: '',
                tel: '',
                chatNum: '',
                sex: '', // 0：男 1：女
                palNum: '',
                groupNum: '',
                vip: '',
                loginDate: '',
                registerDate: '',
                mode: '', // 2：正常 3：已冻结
                online: '',
                IP: '',
                personalSign: '',
                wallet: '',
            },
            viewUserForm: false,
            // 修改
            formData: {
                img: '',
                name: '',
                tel: '',
                chatNum: '',
                sex: '', // 0：男 1：女
                palNum: '',
                groupNum: '',
                vip: '',
                loginDate: '',
                registerDate: '',
                mode: '', // 2：正常 3：已冻结
                online: '',
                IP: '',
                operate: '',
                personalSign: '',
                wallet: '',
            },
            alterUserForm: false,
            formLabelWidth: '80px',
            // 判断对象中是否有空值
            flag: true,
            // 头像
            imgshow: true,
            // 修改信息的时间输入框
            formDatePickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            // 规则
            rules: {
                img: [
                    { required: true, message: '请选择头像', trigger: ['blur', 'change', 'click'] },
                ],
                name: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: ['blur', 'change'] }
                ],
                tel: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '输入错误', trigger: ['blur', 'change'] }
                ],
                chatNum: [
                    { required: true, message: '请输入来聊号', trigger: 'blur' },
                    { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: ['blur', 'change'] }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                palNum: [
                    { required: true, message: '请输入好友数量', trigger: 'blur' },
                    { type: 'number', message: '请输入数字', trigger: ['blur', 'change'] }
                ],
                groupNum: [
                    { required: true, message: '请输入群组数量', trigger: 'blur' },
                    { type: 'number', message: '请输入数字', trigger: ['blur', 'change'] }
                ],
                registerDate: [
                    { required: true, message: '请选择注册日期', trigger: 'change' }
                ],
                mode: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ],

            },
        }
    },
    methods: {
        sizeChange(current, count) {
            this.currentPage = current;
            this.pageSize = count;
        },
        currentChange(current) {
            this.currentPage = current
        },
        // 搜索
        searchData() {
            setTimeout(() => {
                this.userList = this.$store.state.userList.userListSearch
            }, 100)
        },
        // 新增
        addUser() {
            this.$axios.get(this.$api.user.userList)
                .then(res => {
                    this.userList = res.data;
                })
                .catch(err => {
                    console.log(err);
                })
        },
        // 批量删除数据
        delFromTable() {
            this.$axios.get(this.$api.user.userList)
                .then(res => {
                    this.userList = res.data;
                })
                .catch(err => {
                    console.log(err);
                })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.$store.dispatch('handleSelectionChange', this.multipleSelection)
        },
        // 查看用户信息
        view(row) {
            console.log(row);
            this.viewUserForm = true;
            this.viewData = row
        },
        cancelView() {
            this.viewUserForm = false
        },
        // 修改用户状态
        freeze(row) {
            this.$axios({
                method: 'get',
                url: this.$api.user.alterMode,
                params: {
                    userID: row.id,
                    userMode: row.mode,
                    userOperate: row.operate
                }
            })
                .then(res => {
                    if (res.data == 'success') {
                        this.$axios.get(this.$api.user.userList)
                            .then(res => {
                                this.userList = res.data;
                            })
                            .catch(err => {
                                console.log(err);
                            })
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        // 头像
        uploadFile(item) {
            this.formData.img = URL.createObjectURL(item.raw);
            if (this.formData.img != '') {
                this.imgshow = false
            };
        },
        update(row) {
            this.alterUserForm = true;
            this.formData = { ...row };
            if (row.sex == '男') {
                this.formData.sex = 0
            } else {
                this.formData.sex = 1
            }
            if (row.mode == '正常') {
                this.formData.mode = 2
            } else {
                this.formData.mode = 3
            }
        },
        // 确认修改
        alterUser(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.alterUserForm = false;
                    this.$axios({
                        method: 'post',
                        url: this.$api.user.alterUser,
                        data: {
                            alterData: this.formData
                        }
                    })
                        .then(res => {
                            if (res.data == 'success') {
                                this.$axios.get(this.$api.user.userList)
                                    .then(res => {
                                        this.userList = res.data;
                                    })
                                    .catch(err => {
                                        console.log(err);
                                    })
                                    this.$refs[formName].resetFields();
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        })

                } else {
                    return false
                }
            })

        },
        // 取消修改
        cancelAlter(formName) {
            this.alterUserForm = false
            for (let key in this.formData) {
                this.formData[key] = ''
            }
            this.$refs[formName].resetFields();
        },
        // 删除当前用户
        del(row) {
            this.$axios({
                method: 'get',
                url: this.$api.user.delUser,
                params: {
                    userID: row.id
                }
            })
                .then(res => {
                    if (res.data == 'success') {
                        this.$axios.get(this.$api.user.userList)
                            .then(res => {
                                this.userList = res.data;
                            })
                            .catch(err => {
                                console.log(err);
                            })
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },

        
    },
    created() {
        this.$axios.get(this.$api.user.userList)
            .then(res => {
                this.userList = res.data;
            })
            .catch(err => {
                console.log(err);
            })
    }
}
</script>

<style scoped>
.userListBox {
    display: flex;
    flex-direction: column;
}

.el-form-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 20px;
}

#view {
    height: 562px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.addInp {
    width: 260px;
}

.addForm>>>.el-form-item {
    margin-left: 0px;
}

.addForm>>>.el-form-item__content {
    margin-left: 10px !important;
}

.styleA .el-upload--picture-card {
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.styleB .el-upload--picture-card {
    display: none;
}
</style>